<template>
    <div class="news-edit" style="margin: 50px auto">
        <div class="form-group">
            <label class="form-label">新闻标题</label>
            <input class="form-control" v-model="news.title">
        </div>
        <div class="form-group">
            <label class="form-label">新闻类别</label>
            <select class="form-select" v-model="news.cate">
                <option v-for="c in categories" :key="c.id" :value="c.alias">{{ c.title }}</option>
            </select>
        </div>
        <div class="row">
            <div class="form-group col-4">
                <label class="form-label">来源</label>
                <input class="form-control" v-model="news.source">
            </div>
            <div class="form-group col-4">
                <label class="form-label">作者</label>
                <input class="form-control" v-model="news.author">
            </div>
            <div class="form-group col-4">
                <label class="form-label">发布时间</label>
                <input type="datetime-local" class="form-control" v-model="news.pub_time">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">新闻内容</label>
            <div ref="xx"></div>
        </div>
        <div class="form-group">
            <button @click="saveNews" class="btn btn-primary">保存新闻</button>

            <button style="margin-left: 10px" class="btn btn-info" @click="$router.back()">返回</button>
        </div>
    </div>
</template>

<script>
import E from 'wangeditor'
import news from "@/service/news";
import cate from "@/service/cate";

export default {
    name: "Edit",
    data() {
        return {
            categories: [],
            editor: null,
            news: {
                "id": 0,
                "cate": "",
                "title": "",
                "content": "",
                "source": "",
                "author": "",
                "pub_time": "",
                "status": 1,
                "uuid": "",
                "level": 0
            }
        }
    },
    mounted() {
        // 富文本编辑器的使用
        // 1.安装依赖 npm install wangeditor
        // 2.引用 依赖 import E from 'wangeditor'
        // 3.初始化并创建
        this.editor = new E(this.$refs.xx)
        this.editor.create()



        this.loadCategory()
        this.loadNewsDetail()
    },
    methods: {
        loadCategory() {
            // 加载分类
            cate.all().then(result => {
                this.categories = result.data.data
            })
        },
        loadNewsDetail() {
            // ?id=xxx => this.$route.query.id // 推荐使用，刷新页面参数不丢失
            // this.$router.push({
            // params:{xxx}
            // })  ==> this.$route.params.xxx
            news.get(this.$route.query.id).then(result => {
                const data = result.data
                if (data.code != 0) {
                    alert(data.message)
                } else {
                    this.news = data.data
                    this.news.pub_time = this.news.pub_time.substr(0, 16)
                    this.editor.txt.html(this.news.content)
                }
            });
        },
        saveNews(){
            this.news.content = this.editor.txt.html()
            news.save(this.news).then(ret=>{
                console.log(ret)
                if(ret.data.code == 0){
                    alert('修改成功')
                }else{
                    alert(ret.data.message)
                }
            })
        }
    }
}
</script>

<style scoped>
.form-group{
    margin-top: 20px;
}
</style>